﻿
@{
    ViewBag.Title = "拓垦云商品库";
    Layout = "~/Views/Shared/_MallLayout.cshtml";
}
@section style{
    <link href="~/Scripts/mescroll/mescroll.min.css" rel="stylesheet" />
    <style type="text/css">
        .mescroll {
            position: fixed;
            top: 0;
            bottom: 0;
            height: auto;
        }
    </style>
}
<body class="page-index ">
    <div class="mescroll" id="mescroll">
        <div class="bg-white">
            <div class="mod-search mod-search-bg">
                <div class="searchBox bg-white radius flex">
                    <div class="searchBtn flex-box">
                        <i class="icon-sc"></i>
                    </div>
                    <input id="keyword" class="searchInput fn30 flex-1" type="text" placeholder="请输入需要搜索的商品">
                    <a id="search_btn" href="javascript:void(0);" class="searchNow cur fn30">搜索</a>
                </div>
            </div>
        </div>

        <div class="mod-type mod-typeTab">
            <ul class="shop_tab">
                <li class="cur" value="1">
                    爆款推荐
                    <i></i>
                </li>
                <li value="3">价格优惠<i></i></li>
                <li value="4">最新上架<i></i></li>
            </ul>
        </div>
        <div class="mod-fallsceshi mt20">
            <div class="masonry" id="dataList">
            </div>
        </div>
        <!-- 底部导航 -->
        <a class="goTop">
            <img src="~/Content/css/tokenmall/img/icon/goTop.png" />
        </a>
    </div>
    <script src="~/Scripts/tokenmall/masonry-docs.min.js"></script>
    <script src="~/Scripts/tokenmall/imagesloaded.min.js"></script>
    <script src="~/Scripts/mescroll/mescroll.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $container = $('.masonry');
            var total_pages = 1;
            var isload = false;
            var keyword = "";
            var sort = 1;
            let dataUrl = '/ProductManage/_Distribution';
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false,
                    callback: function (mescroll) {
                        $container.html('');
                        $container.masonry('layout');
                        mescroll.resetUpScroll();
                    }
                },
                up: {
                    callback: askData,
                    page: { num: 0, size: 6 },
                    clearEmptyId: "dataList",
                    isBounce: false,
                    noMoreSize: 3,
                    htmlNodata: '<p class="upwarp-nodata">亲,我是有底线的~</p >',
                    empty: { warpId: "dataList", icon: "", tip: "亲,暂时没有数据哦~" },
                    toTop: {}
                }
            });
            //异步请求数据
            function askData(pager) {
                if (!isload && total_pages >= pager.num) {
                    isload = true;
                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        params: "contentType",
                        data: { page: pager.num, size: pager.size, keyword: keyword, sort: sort },
                        success: function (res) {
                            var $elems = $(res);
                            var paged = $elems.siblings("page");
                            var rows = Number.parseInt(paged.attr("rows"));
                            var total = Number.parseInt(paged.attr("total_result"));
                            mescroll.endBySize(rows, total);
                            if (paged.length == 1) {
                                total_pages = Number.parseInt(paged.attr("total_pages"));
                                msnryobj.masonryImagesReveal($elems);
                                $('#dataList page').remove();
                            } else {
                                $(".upwarp-nodata").html('亲,暂时没有数据哦~');
                            }
                            isload = false;
                        },
                        error: function (err) {
                            isload = false;
                            mescroll.endErr();
                        }
                    });
                }
            }
            var width = $container.width() / 2;
            var msnryobj = $container.masonry({ itemSelector: '.item', gutter: 0, columnWidth: width, isAnimated: true });
            $.fn.masonryImagesReveal = function ($items) {
                var msnry = this.data('masonry');
                var itemSelector = msnry.options.itemSelector;
                $items.hide();
                this.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    var $item = $(image.img).parents(itemSelector);
                    $item.show();
                    msnry.appended($item);
                });
                return this;
            };
            $('.shop_tab li').click(function () {
                $(this).addClass('cur').siblings().removeClass('cur');
                sort = $(this).val();
                $container.html('');
                $container.masonry('layout');
                //重置列表数据
                mescroll.resetUpScroll();
                //隐藏回到顶部按钮
                mescroll.hideTopBtn();
            });
            $("#keyword").on('keypress', function (e) {
                //#keyword为input文本框
                var keycode = e.keyCode;
                keyword = $(this).val();
                if (keycode == '13') {
                    $container.html('');
                    $container.masonry('layout');
                    //重置列表数据
                    mescroll.resetUpScroll();
                    //隐藏回到顶部按钮
                    mescroll.hideTopBtn();
                }
            });
            $("#search_btn").click(function () {
                keyword = $("#keyword").val();
                $container.html('');
                $container.masonry('layout');
                //重置列表数据
                mescroll.resetUpScroll();
                //隐藏回到顶部按钮
                mescroll.hideTopBtn();
            });
            $("#dataList").delegate(".add_share", "click", function () {
                var that = $(this);
                var p_id = that.attr("data-id");
                //layer.confirm('您确认要把该商品添加到自己的店铺吗？', {
                //    btn: ['确定', '取消'] //按钮
                //}, function () {
                //    layer.load(1);
                //    $.post("/productmanage/SaveShareProduct", { product_id: p_id }, function (result) {
                //        layer.closeAll('loading');
                //        if (result.result_code == 1000) {
                //            that.removeClass("ui-btn-share").removeClass("add_share").addClass("ui-btn-default");
                //            that.html("已添加");
                //            layer.msg("添加成功");
                //        }
                //        else {
                //            layer.msg(result.result_msg);
                //        }
                //    });
                //}, function () {
                //});
                var flag = false;
                if (!flag) {
                    layer.load(1);
                    flag = true;
                    $.post("/productmanage/SaveShareProduct", { product_id: p_id }, function (result) {
                        flag = false;
                        layer.closeAll('loading');
                        if (result.result_code == 1000) {
                            that.removeClass("ui-btn-share").removeClass("add_share").addClass("ui-btn-default");
                            that.html("已添加");
                            layer.msg("添加成功");
                        }
                        else {
                            layer.msg(result.result_msg);
                        }
                    });
                }
            });
        });
    </script>
</body>

